<template>
  <el-drawer with-header :visible.sync="open_class_scheduling" direction="rtl" size="35%" :show-close="false"
    :wrapperClosable="false">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="ml30">
          <div class="grid-content bg-purple-dark    text-size-23-w700  ">班级默认排课信息配置</div>

          <!-- <div class="grid-content bg-purple     text-size-16 mt20 text-gray  ">切换为日历模式可以单独选择日期</div> -->

        </div>

      </el-col>
      <el-col :span="12">
        <div class="classflex-end">

          <el-button @click="cancel" style="width: 100px;margin-right: 40px;">取消</el-button>
          <!-- <el-button @click="savechange" style="width: 100px;margin-right: 20px;">保存设置</el-button> -->
        </div>

      </el-col>
    </el-row>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-divider style="width: 80%;"></el-divider>


      <div class="ml20">

        <el-form-item label="周几排课" prop="classWorkOut">


          <el-select v-model="form.classWorkOut" multiple placeholder="请选择周几排课" style="width: 360px;">
            <el-option v-for="dict in dict.type.week_day" :key="dict.value" :label="dict.label" :value="dict.value">
            </el-option>
          </el-select>


        </el-form-item>
        <el-form-item label="循环方式" prop="classCirculate">
          <el-select v-model="form.classCirculate" placeholder="请选择循环方式" style="width: 360px;">
            <el-option v-for="dict in dict.type.class_circulate" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="classStart">
          <!-- <el-input v-model="form.classStart" placeholder="请输入上课时间开始" style="width: 360px;" /> -->
          <el-time-picker style="width: 360px;"
              v-model="form.classStart"
              :picker-options="{
                selectableRange: '00:00:00 - 23:59:59'
              }"
              placeholder="开始时间">
            </el-time-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="classFinish">
          <!-- <el-input v-model="form.classFinish" placeholder="请输入上课时间结束" style="width: 360px;" /> -->

          <el-time-picker style="width: 360px;"
              v-model="form.classFinish"
              :picker-options="{
                selectableRange: '00:00:00 - 23:59:59'
              }"
              placeholder="结束时间">
            </el-time-picker>
        </el-form-item>
        <el-form-item label="课时数" prop="classHours">

          <el-input-number v-model="form.classHours" :min="1" :max="10" label="描述文字" controls-position="right"></el-input-number>
          <!-- <el-input v-model="form.classHours" placeholder="请输入课时数" style="width: 360px;" /> -->
        </el-form-item>



        <el-form-item label="授课教师" prop="classTeacher">

          <!-- <el-input style="width: 350px;" v-model="form.followUpPerson" placeholder="请输入跟进人"   filterable/> -->
          <el-select style="width: 350px;" multiple v-model="form.classTeacher" placeholder="请选择授课教师" filterable>
            <el-option v-for="dict in userList" :key="dict.userId" :label="dict.nickName" :value="dict.nickName">
            </el-option>

          </el-select>
        </el-form-item>

        <el-form-item label="考勤员" prop="classAttendant">

          <!-- <el-input style="width: 350px;" v-model="form.followUpPerson" placeholder="请输入跟进人"   filterable/> -->
          <el-select style="width: 350px;" v-model="form.classAttendant" placeholder="请输入考勤员" filterable>
            <el-option v-for="dict in userList" :key="dict.userId" :label="dict.nickName" :value="dict.nickName">
            </el-option>

          </el-select>
        </el-form-item>





        <el-form-item label="上课教室" prop="classRoom">

          <el-select style="width: 350px;" v-model="form.classRoom" placeholder="请输入上课教室" filterable>
            <el-option v-for="dict in classroomList" :key="dict.userId" :label="dict.classroomName" :value="dict.classroomName">
            </el-option>

          </el-select>

        </el-form-item>
      </div>
    </el-form>
    <el-divider></el-divider>
    <div class="ml20 mr20">
      <el-button type="primary" @click="submitForm" style="width: 100%;">保存设置</el-button>
      <!-- <el-button @click="cancel">取 消</el-button> -->
    </div>
  </el-drawer>

</template>

<script>
  import {
    listScheduling,
    getScheduling,
    delScheduling,
    addScheduling,
    updateScheduling
  } from "@/api/scheduling/scheduling";
  import { listClassroom, getClassroom, delClassroom, addClassroom, updateClassroom } from "@/api/classroom/classroom";
  import {
    listUser,
    listUser2,
    getUser,
    delUser,
    addUser,
    updateUser,
    resetUserPwd,
    changeUserStatus,
    deptTreeSelect
  } from "@/api/system/user";
  import {
    listSchoolclass,
    getSchoolclass,
    delSchoolclass,
    addSchoolclass,
    updateSchoolclass
  } from "@/api/schoolclass/schoolclass";

  export default {
    name: "Scheduling",
    dicts: ['class_circulate', 'week_day'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 课程表表格数据
        schedulingList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open_class_scheduling: false,
        // 查询参数
        queryParams: {
         pageNum: 1,
                 pageSize: 10,
                 deptId: null,
                 className: null,
                 classCourse: null,
                 classCapacity: null,
                 classAskforleave: null,
                 classNoyet: null,
                 classWorkOut: null,
                 classCirculate: null,
                 classStart: null,
                 classFinish: null,
                 classHours: null,
                 classTeacher: null,
                 classAttendant: null,
                 classRoom: null,
                 classStudent: null,
                 schedulingremark: null,
                 schedulingremark2: null,
                 schedulingremark3: null,
                 schedulingremark4: null,
                 schedulingremark5: null,
                 schedulingremark6: null,
                 schedulingremark7: null,
                 schedulingremark8: null,
                 schedulingremark9: null,
                 schedulingremark10: null,
                 classId: null,
                 studyDate: null,
                 week: null,
                 state: null,
                 reach: null,
                 unreach: null,
                 askforleave: null,
                 attendance: null,
                 totalConsumption: null
        },
        // 表单参数
        form: {
          classHours:1
        },
        // 表单校验
        rules: {},
        userList: [],
        classroomList: [],
        queryParamsTeacher: {},
        queryclassroomParams: {}
      };
    },
    created() {
      this.getTeacherList();
      this.getClassroomList();
    },
    methods: {
      getTeacherList() {

        this.queryParamsTeacher.deptId = this.$store.state.user.deptId;
         
        listUser2(this.queryParamsTeacher).then(response => {
          this.userList = response.rows;
          // console.log(this.userList);

        });
      },
      savechange() {

      },
      openscheduling(id) {
        this.open_class_scheduling = true;
        console.log("传来的："+id);
         this.form.id=id;

      },
      /** 查询教室列表 */
      getClassroomList() {
    this.queryclassroomParams.deptId = this.$store.state.user.deptId;
        listClassroom(this.queryclassroomParams).then(response => {
          this.classroomList = response.rows;

        });
      },
      // 取消按钮
      cancel() {
        this.open_class_scheduling = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          deptId: null,
          className: null,
          classCourse: null,
          classCapacity: null,
          classAskforleave: null,
          classNoyet: null,
          classWorkOut: null,
          classCirculate: null,
          classStart: null,
          classFinish: null,
          classHours: null,
          classTeacher: null,
          classAttendant: null,
          classRoom: null,
          classStudent: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        };
        this.resetForm("form");
      },



      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getScheduling(id).then(response => {
          this.form = response.data;
          this.open_class_scheduling = true;
          this.title = "修改课程表";
        });
      },
      /** 提交按钮 */
      submitForm() {
        if( this. form.classTeacher.length){
            this. form.classTeacher =  this.form.classTeacher.join(",");
        }else{
          this. form.classTeacher=""
        }
      if( this. form.classWorkOut.length){
           this. form.classWorkOut =  this.form.classWorkOut.join(",");
        }else{
          this. form.classWorkOut=""
        }
          this. form.classHours=""+this. form.classHours;




          this.$refs["form"].validate(valid => {
            if (valid) {
              this.form.deptId = this.$store.state.user.deptId;
              if (this.form.id != null) {

                updateSchoolclass(this.form).then(response => {
                  this.$modal.msgSuccess("修改成功");
                  this.open_class_scheduling = false;
                  // this.getList();
                });
              } else {
                 this.$modal.msgSuccess("系统错误");
               
              }
            }
          });



      
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除课程表编号为"' + ids + '"的数据项？').then(function() {
          return delScheduling(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },

    }
  };
</script>
